<template>
  <div class="home-container">
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <QyTabbar
        v-model="active"
        active-color="#000"
        inactive-color="#ccc"
        route
      >
        <QyTabbarItem
          v-for="tab in filteredTabs"
          :to="tab.to"
          :key="tab.id"
        >
          <template #icon="props">
            <img :src="props.active ? tab.icons.activeIcon : tab.icons.icon" />
          </template>
          <span>{{ tab.title }}</span>
        </QyTabbarItem>
      </QyTabbar>
    </footer>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { Tabbar, TabbarItem } from 'vant'
  import { mapState } from 'vuex'

  import cookbook from '@/assets/images/cookbook.png'
  import cookbookActive from '@/assets/images/cookbook-active.png'
  import menu from '@/assets/images/menu.png'
  import menuActive from '@/assets/images/menu-active.png'
  import more from '@/assets/images/more.png'
  import moreActive from '@/assets/images/more-active.png'
  import location from '@/assets/images/location.png'
  import locationActive from '@/assets/images/location-active.png'

  import QyTabbar from '@/components/tabbar/QyTabbar.vue'
  import QyTabbarItem from '@/components/tabbar/QyTabbarItem.vue'

  Vue.use(Tabbar).use(TabbarItem)

  export default {
    components: {
      QyTabbar,
      QyTabbarItem
    },

    data() {
      return {
        active: 0,
        tabs: [
          {
            id: '001',
            title: '美食大全',
            to: '/home/cookbook',
            icons: {
              icon: cookbook,
              activeIcon: cookbookActive
            }
          },
          {
            id: '002',
            to: '/home/menu',
            title: '分类',
            icons: {
              icon: menu,
              activeIcon: menuActive
            }
          },
          {
            id: '003',
            title: '美食地图',
            to: '/home/map',
            icons: {
              icon: location,
              activeIcon: locationActive
            }
          },
          {
            id: '004',
            title: '更多',
            to: '/home/more',
            icons: {
              icon: more,
              activeIcon: moreActive
            }
          },
        ]
      }
    },

    computed: {
      ...mapState(['showMap']),

      filteredTabs() {
        if (!this.showMap) {
          return this.tabs.filter(tab => tab.id !== '003')
        } else {
          return this.tabs
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.home-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  main {
    flex: 1;
    overflow: hidden;
  }

  footer {
    height: .5rem;
  }
}

</style>